<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="container">
        <!-- 顶部搜索框 -->
        <home-head />
        <!-- 轮播 -->
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" class="imga" />
          </van-swipe-item>
        </van-swipe>
        <!-- 宫格栏 -->
        <van-grid column-num="4" clickable
          ><!-- clickable 高亮类 点击显示背影 -->
          <van-grid-item
            v-for="cate in cates"
            :key="cate.id"
            :icon="cate.icon"
            :text="cate.name"
            :to="{
              path:'./itemList',
              query:{
                cated:cate.id
              }
            }"
          />
        </van-grid>
        <!-- 健康头条 -->
        <health />
        <van-divider
          :style="{
            color: '#1989fa',
            borderColor: '#1989fa',
            padding: '0 16px',
          }"
        >
          猜你喜欢
        </van-divider>
        <!-- 推荐商品 -->
        <van-list
          v-model="loading"
          :finished="finished"
          :offset="50"
          finished-text="人家也是有底线的呐"
          @load="onLoad"
        >
          <items @clickItem="enterDetail"  @clickAddIcon="addCart" :items="items" />
          <!-- 子组件的数据传过来的 -->
        </van-list>
        <items />
      </div>
    </van-pull-refresh>
    <!-- 底部 -->
    <my-tabbar />
  </div>
</template>

<script>
import { fetchCates, fetchItems, addCart } from '_api'
import MyTabbar from '../../components/MyTabbar.vue'
import Health from './components/Health.vue'
import HomeHead from './components/HomeHead.vue'
import Items from './components/Items.vue'
import { getToken } from '_utils'
import { Toast } from 'vant'
export default {
  components: { MyTabbar, HomeHead, Health, Items },
  name: 'Home',
  data () {
    return {
      images: [
        'https://image.360kad.com/group1/M00/24/47/CgAgDmDZc3WAP9JGAAETi7ZllyE971.jpg',
        'https://image.360kad.com/group1/M00/AE/23/CgAgDmFuFDyAbmBrAAG0wZ_2Pl8810.jpg'
      ],
      cates: [], // 宫格导航
      items: [], // 推荐商品数据
      isLoading: false, // 是否处理下拉加载状态
      page: 1, // 当前页
      pageSize: 4, // 一页多少条
      loading: false, // 代表是否上拉触底 （上拉触底时会自动变成true）, 变成true时自动触发 load事件
      finished: false // 是否到达最后一页 变成true 不会再触发 load 事件

    }
  },
  created () {
    // 初始化时调用方法
    this.fetchCates()
  },

  methods: {
    addCart ({ id }) {
      // 加入购物车
      addCart({
        goodsId: id,
        number: 1,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          Toast.success('加入购物车成功')
          this.$store.commit('cart/set_cart_info', {
            items: res.data.data.items,
            number: res.data.data.number
          })
        }
      })
    },
    enterDetail (id) {
      // 跳转到详情页
      this.$router.push(`/detail/${id}`)
    },
    onLoad () {
      this.fetchItems() // 初始化时自动调用一次 初始数据没有过来 网页内容高度没有撑开，内容和可视区距离是 负数
      this.page++ // 将page+1请求下一页的数据
    },
    onRefresh () {
      // 下拉刷新回调 处理 下拉时调用 isLoading会自动变成true
      // 重新请求列表数据
      this.page = 1 // 重新请求第一页数据 下拉得回到初始1 因为前面是合并了 把数据清空
      this.items = []
      this.finished = false // 一直下拉加载到底部触发700  finished就为true了 在回到顶部刷新
      console.log('下拉了')
      this.fetchItems()
      this.page++ // 往下拉会先调用 page等于1 这里加一
    },
    // 请求首页推荐商品数据
    fetchItems () {
      fetchItems({
        categoryId: '72399', // 商品id
        page: this.page,
        pageSize: this.pageSize
      }).then((res) => {
        this.isLoading = false // 上面请求调用 这里就变为false 刷新成功
        this.loading = false // 在这里将 上拉加载状态变成false (下一页数据已经过来的)
        if (res.data.code === 0) {
          console.log(res)
          this.items = [...this.items, ...res.data.data.result] //   拼接是为了前面数据不丢失 不然一刷新回到顶部数据都变了
        }
        if (res.data.code === 700) {
          this.finished = true // 已经到达最后一页 没有数据了
        }
      })
    },
    // 请求宫格导航的商品分类
    fetchCates () {
      fetchCates().then((res) => {
        if (res.data.code === 0) {
          this.cates = res.data.data
          /* 删除最后一个 */
          res.data.data.pop()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.imga {
  width: 100%;
}
.van-divider {
  color: #888888 !important;
  border-color: rgb(216, 214, 214) !important;
}
.container {
  padding-bottom: 50px;
}
</style>
